1
00:00:00,540 --> 00:00:03,060
Hello and welcome to this lecture.

2
00:00:03,390 --> 00:00:04,430
In this ledger.

3
00:00:04,470 --> 00:00:10,350
We will be quitting our canvas for the bouncing Bob projet.

4
00:00:11,220 --> 00:00:19,680
I have created a folder on my desktop called the bouncing ball which is this here you can name yours

5
00:00:19,710 --> 00:00:24,180
whatever name you like inside the folder.

6
00:00:24,450 --> 00:00:31,730
I have got three files have called the Index which contains the hastier mail for the project.

7
00:00:32,010 --> 00:00:42,150
The javascript which is where I will write any javascript that will draw or hand perform animations

8
00:00:42,210 --> 00:00:43,380
on the come.

9
00:00:43,910 --> 00:00:49,570
And of course the CSF file which is used to create styling to comebacks.

10
00:00:49,830 --> 00:00:56,920
So let's have a look at the index file this files here may be familiar to you.

11
00:00:56,940 --> 00:01:08,010
Especially the content because I have copied them from our previous lectures where we did create in

12
00:01:08,070 --> 00:01:09,760
our first combat's.

13
00:01:09,900 --> 00:01:12,790
So let me right click on the index so you can see.

14
00:01:13,260 --> 00:01:18,680
So this is the in this file which is the case CML for the project.

15
00:01:18,810 --> 00:01:26,500
So all we've got is Doc type D language attribute in the head section of title.

16
00:01:26,730 --> 00:01:29,160
The marikar set and the link.

17
00:01:29,160 --> 00:01:37,080
This is a link to this here says that will be using for the project in the body tag.

18
00:01:37,370 --> 00:01:45,600
This where we've created the canvas we've given the canvas and I have tribute of my comebacks and given

19
00:01:45,600 --> 00:01:50,300
it a whiff of 650 and the height of 450.

20
00:01:50,310 --> 00:01:54,420
So put the right attributes as well.

21
00:01:54,420 --> 00:01:58,780
I also included a for back content.

22
00:01:58,950 --> 00:02:06,500
I've indicated that with a comment that this is a fallback I want to work for but Pontins will do is

23
00:02:06,730 --> 00:02:14,490
if a web browser that is orld and does not support cumbrous is used to view this page.

24
00:02:14,580 --> 00:02:19,390
It will not show the canvas in place of that.

25
00:02:19,410 --> 00:02:25,110
It will show discontent here that I have written hansis Core for back.

26
00:02:25,230 --> 00:02:35,800
Content is good practice to always specify a fall back on it and before the close embody attack.

27
00:02:36,210 --> 00:02:44,280
I have included the script tag and inside this group I've included is parsee which is a source because

28
00:02:44,300 --> 00:02:50,970
is going to reference any javascript I write from this javascript file so this will be an external file

29
00:02:51,450 --> 00:02:58,930
that will be reference use in this source attribute thus sit for this election.

30
00:02:59,100 --> 00:03:06,430
So let's have a quick look at what the combusts looks like.

31
00:03:06,840 --> 00:03:10,800
So if I double click on this you can see it.

32
00:03:10,800 --> 00:03:13,410
So this is what the canvas looks like at the moment.

33
00:03:13,470 --> 00:03:20,000
So the notice the background clock and this is done use in C Ss.

34
00:03:20,020 --> 00:03:23,550
And notice how big canvas is centred.

35
00:03:23,560 --> 00:03:27,770
I've done that using C says margin.

36
00:03:27,940 --> 00:03:31,270
Just placea says so you can see.

37
00:03:31,590 --> 00:03:34,310
So this is the seer says the background column.

38
00:03:34,410 --> 00:03:35,950
Here is what.

39
00:03:36,060 --> 00:03:42,270
This is where I have specified the background colour and given this exact same value here and then the

40
00:03:42,270 --> 00:03:43,270
margin.

41
00:03:43,350 --> 00:03:45,240
This is what I've done with a margin.

42
00:03:45,510 --> 00:03:53,000
So the way the margin works is applied from the top the right the bottom and the left.

43
00:03:53,010 --> 00:04:00,870
So what I'm saying is that from the top 1 the come bust to move down harder than 25 pixels from the

44
00:04:00,870 --> 00:04:01,640
right.

45
00:04:01,770 --> 00:04:10,140
I don't want to move from the bottom either wanted to move however from the left I want it to move from

46
00:04:10,140 --> 00:04:17,160
left 295 pixels so you can play around with whatever values you like.

47
00:04:17,160 --> 00:04:19,760
So this is a left it is moved all the way here.

48
00:04:19,950 --> 00:04:24,730
So play around with the values for the margins.

49
00:04:24,840 --> 00:04:28,590
If you don't like your scented composition it whatever way you like.

50
00:04:28,590 --> 00:04:35,160
Just play around with the margin to get the options you want.

51
00:04:35,500 --> 00:04:38,700
The Javascript at the moment is empty.

52
00:04:38,700 --> 00:04:43,290
If I open that you see because I have not written any script yet.

53
00:04:43,470 --> 00:04:49,890
This is where I will write any javascript I'll be using for the project.

54
00:04:50,790 --> 00:04:58,280
Now that we've created the project in the next lecture we'll be looking at how we can access become

55
00:04:58,330 --> 00:04:59,910
US using Java.

56
00:04:59,980 --> 00:05:02,650
Script thank you so much for watching.

57
00:05:02,650 --> 00:05:03,650
Bye for now.